<template>
	<view>
		<scroll-view scroll-y="true" class="content" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="goods-detail-container">
				<!-- 轮播图区域 -->
				<swiper :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#38d19a" :autoplay="false"
					:interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item, i) in urlHeadList" :key="i">
						<!-- 把当前点击的图片的索引，传递到 preview() 处理函数中 -->
						<video v-if="item.name=='video'" :src="item.url" style="display: inline-block;width: 100%;height: 100%;"
							controls></video>
						<image v-else :src="item.url"></image>
					</swiper-item>
				</swiper>
				<!-- 商品信息区域 -->
				<view class="goods-info-box mt5" v-if="goods_info.productName">
					<!-- 信息主体区域 -->
					<view class="goods-info-body mb10">
						<!-- 商品名称 -->
						<view class="goods-name">{{goods_info.productName}}</view>
					</view>

					<!-- 商品价格 -->
					<view class="d-flex a-center j-sb">
						<view class="d-flex a-end">
							<view class="price f_family_din mr15">¥{{goods_info.productPrice}}</view>
							<view v-if="goods_info.discountPrice" class="zkj f_family_din">折扣价：{{goods_info.discountPrice}}</view>
						</view>
						<view class="d-flex a-end kc">
							<view>库存{{goods_info.productStock}} </view>
							<view class="ml10" v-if="goods_info.productDealNum">已售{{goods_info.productDealNum}}+</view>
						</view>
					</view>

					<view class="d-flex a-center j-center bbxq mt20 mb20">
						<view class="line"></view>
						<view class="mr15 ml15">宝贝详情</view>
						<view class="line"></view>
					</view>

				</view>
				<view v-for="(itemY, Y) in detailUrlList" :key="Y" style="font-size: 0;">
					<image :src="itemY" mode="widthFix" style="width: 750rpx; font-size: 0;"></image>
				</view>
				<view class="goods_nav">
					<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
						@buttonClick="buttonClick($event, goods_info.productCode)" />
				</view>

				<u-popup :show="show" closeable="true" closeIconPos="top-right" @open="show = true" @close="popupClose">
					<view class="myPopup">
						<view class="mb10">
							<view class="title mb10">属性信息</view>
							<view class="content_item d-flex flex-column j-sb">
								<view class="d-flex a-center j-sb mb10" v-if="goods_info.brandName">
									<view>品牌</view>
									<view>{{goods_info.brandName}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10" v-if="goods_info.vehicleModel">
									<view>型号</view>
									<view>{{goods_info.vehicleModel}}</view>
								</view>
								<view class="d-flex a-center j-sb mb10" v-if="goods_info.milage">
									<view>里程数</view>
									<view>{{goods_info.milage}}</view>
								</view>
							</view>
						</view>
						<view v-if="goods_info.ruleList.length != 0">
							<view class="title mb10">优惠信息</view>
							<view class="content_item d-flex flex-column j-sb">
								<view class="d-flex a-center j-sb mb10" v-for="item in goods_info.ruleList" :key="item.ruleName">
									<view>{{item.ruleName}}</view>
									<view>{{item.disCount}} 折</view>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		queryByDetailByApp
	} from "@/api/index.js"
	// 从 vuex 中按需导出 mapState 辅助方法
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				productCode: "",
				// 商品详情对象
				goods_info: {},
				urlHeadList: [],
				detailUrlList: [],
				show: false,
				options: [{
					icon: '',
					text: '',
					info: 0,
				}, {
					icon: '',
					text: '',
					info: 0
				}],
				buttonGroup: [{
						text: '查看属性',
						backgroundColor: '#6ad89a',
						color: '#fff'
					},
					{
						text: '',
						backgroundColor: '#FFC149',
						color: '#fff'
					}
				],
			};
		},
		computed: {
			// 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
			// ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
			// 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用
			// ...mapGetters('m_cart', ['total']),
		},
		onLoad(options) {
			if (options.productCode) {
				this.productCode = options.productCode
			}
		},
		async mounted() {
			// 调用请求商品详情数据的方法
			await this.queryByDetailByApp()
		},
		methods: {
			async queryByDetailByApp() {
				const that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				await queryByDetailByApp({
					productCode: that.productCode,
					customerCode: that.userInfo.customerCode
				}).then(res => {
					const object = res.object

					that.goods_info = object

					let list = object.headUrl1.split('&')

					let arr = []
					list.forEach(item => {
						let obj = {
							name: "img",
							url: item
						}

						arr.push(obj)
					})

					if (object.headVideoUrl) {
						let obj = {
							name: "video",
							url: object.headVideoUrl
						}
						arr.unshift(obj)
					}

					that.urlHeadList = arr

					that.detailUrlList = object.detailUrl.split('&')

					if (object.productAsttributes == 0) {
						that.buttonGroup[1].text = '购买'
					} else {
						that.buttonGroup[1].text = '预约'
					}

					uni.hideLoading()
				})
			},

			// 左侧按钮的点击事件处理函数
			onClick(e) {
				console.log(e, '左侧按钮');

			},
			// 右侧按钮的点击事件处理函数
			buttonClick(e, data) {
				// 1. 判断是否点击了 加入购物车 按钮
				if (e.content.text === "查看属性") {
					this.show = true
				} else {

					if (e.content.text === "购买") {
						uni.navigateTo({
							url: "/pages/order/orderClear?productCode=" + data
						});
					} else {
						uni.navigateTo({
							url: "/pages/order/orderClear2?productCode=" + data
						});
					}
				}
			},

			popupClose() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}
	
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goods-detail-container {
		// 给页面外层的容器，添加 50px 的内padding，
		// 防止页面内容被底部的商品导航组件遮盖
		// padding-bottom: 50px;
	}

	.goods_nav {
		// 为商品导航组件添加固定定位
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
	}

	/deep/ .uni-tab__cart-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .goods_nav .uni-tab__cart-box {
		background-color: transparent;
	}

	/deep/ .uni-tab__cart-sub-left {
		display: none;
	}

	/deep/ .uni-tab__right {
		height: 80%;
		width: 70%;
	}

	/deep/ .uni-tab__cart-sub-right {
		flex: 0.7 !important;
	}

	// 商品信息区域的样式
	.goods-info-box {
		box-sizing: border-box;
		padding: 10px;

		.price {
			color: #FF6D6D;
			font-size: 40rpx;
			font-weight: 400;
		}

		.zkj {
			font-size: 32rpx;
			color: #38d19a;
			font-weight: 400;
		}

		.kc {
			font-size: 26rpx;
			color: #999999;
			font-weight: 400;
		}

		.goods-info-body {
			display: flex;
			justify-content: space-between;

			.goods-name {
				font-size: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-500;
				font-weight: 500;
				color: #333333;
			}

			// 收藏区域
			.favi {
				width: 120px;
				font-size: 12px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #efefef;
				color: gray;
			}
		}

		.bbxq {
			font-size: 32rpxpx;
			font-family: Source Han Sans CN, Source Han Sans CN-500;
			font-weight: 400;
			color: #80b999;

			.line {
				width: 60rpx;
				border-width: thin;
				border: 0.5px #80b999 solid;
			}
		}

		// 运费
		.imgIfo {
			width: 750rpx;
			height: 750rpx;
		}


	}

	.myPopup {
		// height: 600rpx;
		box-sizing: border-box;
		padding: 80rpx 60rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.title {
			font-size: 40rpx;
			color: #333333;
			font-weight: 500;
		}

		.content_item {
			font-size: 32rpx;
			color: #666666;
			font-weight: 400;
		}
	}
</style>